<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title>结算规则</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <link rel="stylesheet" href="//cdnhhmk.oss-cn-shenzhen.aliyuncs.com/libs/admin.index.css">
    <link rel="stylesheet" href="//cdnhhmk.oss-cn-shenzhen.aliyuncs.com/libs/admin.reset.css">
    <style>
        .el-tabs__nav {
            margin-left: 130px;
        }
        .content-case {
            z-index: 2;
            margin-top: 9px;
        }
        .table-view {
            width: 1100px;
            margin-bottom: 30px;
        }
        .margin-horizontal {
            margin: 0px 10px;
        }
        .margin-horizontal-plus {
            margin: 0px 50px;
        }
        .subreport-title {
            font-size: 16px;
            line-height: 48px;
            display: flex;
            flex-direction: row;
            align-items: center;
            padding-left: 20px;
        }
        .element-center {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .content-container {
            position: relative;
        }
        .content-container .tab-menu {
            padding: 0px 20px;
            background: #F5F7FA;
            position: absolute;
            height: 50px;
            right: 0px;
            left: 0px;
        }

        .content-container .tab-menu .title {
            font-size: 22px;
            color: #000000;
            line-height: 22px;
            margin-right: 20px;
        }
        .content-container .operation-menu {
            border-bottom: 1px solid #DCDFE6;
        }

        .content-container .content-nav {
            background: #F5F7FA;
            height: 15px;
        }

        .content-container .operation-menu>div:not(:last-child) {
            border-bottom: 1px solid #DCDFE6;
        }

        .content-container .operation-menu .operation-menu__button {
            padding: 10px 20px;
        }

        .content-container .operation-menu .operation-menu__search {
            padding: 10px 20px 0px 20px;
        }

        .content-container .operation-menu .operation-menu__search .search-condition .search-item {
            float: left;
            display: inline-block;
            margin: 0px 20px 10px 0px;
        }

        .content-container .operation-menu .operation-menu__search .search-condition .search-item .label {
            font-size: 14px;
            color: #000000;
            letter-spacing: 0;
            line-height: 16px;
            margin-right: 10px;
            vertical-align: middle;
        }

        .content-container .operation-menu .operation-menu__search .search-condition .search-item .search-input {
            display: inline-block;
        }

    </style>
</head>

<body style="display: none;">
    <div id="app" class="container" flex>
        <el-admin-menu :user-detail="userDetail" :menus="menus" @logout="logout">
            <div class="content-container" flex-box=1 flex="dir:top">
                <div flex-box="0" class="tab-menu" flex="cross:center">
                    <div class="title" flex-box=0>结算规则</div>
                </div>
                <div flex-box="1" class="content-case">
                    <el-tabs v-model="activeName2" type="card" @tab-click="handleClick">
                        <el-tab-pane label="活动结算设置" name="first">
                            <div flex-box="1">
                                <div class="operation-menu">
                                    <div class="operation-menu__button" flex>
                                        <div flex-box="0">
                                            <div class="operation-menu__search" flex="cross:top">
                                                <div flex-box="0" class="search-condition">
                                                    <div class="search-item">
                                                        <span class="label">活动名称</span>
                                                        <div class="search-input">
                                                            <el-input v-model="username" placeholder="秒杀" size="small"></el-input>
                                                        </div>
                                                    </div>
                                                    <div class="search-item">
                                                        <span class="label">报名项名称</span>
                                                        <div class="search-input">
                                                            <el-input v-model="username" placeholder="秒杀" size="small"></el-input>
                                                        </div>
                                                    </div>
                                                    <div class="search-item">
                                                        <span class="label">是否配置规则</span>
                                                        <div class="search-input" style="width: 80px">
                                                            <el-select v-model="value" placeholder="是" size="small">
                                                                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                                                                </el-option>
                                                            </el-select>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div flex-box="0">
                                                    <el-button type="primary" size="small">筛选</el-button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="content-nav"></div>
                            <el-table :data="tableData" style="width: 100%">
                                <el-table-column prop="activityId" label="活动ID" width="120"></el-table-column>
                                <el-table-column prop="activityName" label="活动名称"></el-table-column>
                                <el-table-column prop="projectName" label="报名项名称"></el-table-column>
                                <el-table-column prop="ifconfig" label="是否配置规则" width="160"></el-table-column>
                                <el-table-column prop="configNum" label="结算规则个数" width="160"></el-table-column>
                                <el-table-column prop="createTime" label="创建时间"  width="160"></el-table-column>
                                <el-table-column label="操作"  width="180">
                                    <template slot-scope="scope">
                                        <el-button type="default" size="small" @click="balanceSettingActivity">设置结算</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-tab-pane>
                        <el-tab-pane label="商家结算设置" name="second">
                            <div flex-box="1">
                                <div class="operation-menu">
                                    <div class="operation-menu__button" flex>
                                        <div flex-box="0">
                                            <div class="operation-menu__search" flex="cross:top">
                                                <div flex-box="0" class="search-condition">
                                                    <div class="search-item">
                                                        <span class="label">商家简称</span>
                                                        <div class="search-input">
                                                            <el-input v-model="username" placeholder="秒杀" size="small"></el-input>
                                                        </div>
                                                    </div>
                                                    <div class="search-item">
                                                        <span class="label">是否配置规则</span>
                                                        <div class="search-input" style="width: 80px">
                                                            <el-select v-model="value" placeholder="是" size="small">
                                                                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                                                                </el-option>
                                                            </el-select>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div flex-box="0">
                                                    <el-button type="primary" size="small">筛选</el-button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="content-nav"></div>
                            <el-table :data="tableData1" style="width: 100%">
                                <el-table-column prop="sellerId" label="商家ID" width="80"></el-table-column>
                                <el-table-column prop="sellerName" label="商家简称" width="180"></el-table-column>
                                <el-table-column prop="companyName" label="公司名称"></el-table-column>
                                <el-table-column prop="area" label="所属区域" width="100"></el-table-column>
                                <el-table-column prop="genre" label="类别" width="100"></el-table-column>
                                <el-table-column prop="adExpend" label="广告费"  width="80"></el-table-column>
                                <el-table-column prop="balanceCycle" label="结算周期" width="100"></el-table-column>
                                <el-table-column prop="balanceRuleNum" label="结算规则个数" width="120"></el-table-column>
                                <el-table-column prop="higherUp" label="上级机构" width="160"></el-table-column>
                                <el-table-column label="操作"  width="280">
                                    <template slot-scope="scope">
                                        <el-button type="default" size="small" @click="balanceSettingSeller">商家设置结算</el-button>
                                        <el-button type="default" size="small" @click="balanceSettingOffline">线下设置结算</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>
        </el-admin-menu>
    </div>
</body>
<script src="common/config.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script>window.jQuery||document.write('<script src="//cdn.staticfile.org/jquery/3.1.1/jquery.min.js"><\/script>')</script>
<script src="testdata/test_data.js"></script>
<script src="//cdnhhmk.oss-cn-shenzhen.aliyuncs.com/libs/admin.index.js"></script>
<script src="//cdnhhmk.oss-cn-shenzhen.aliyuncs.com/libs/admin.comon.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function() {
            return {
                visible: false,
                activeName2: 'first',
                options: [{
                    value: '选项1',
                    label: '是'
                }, {
                    value: '选项2',
                    label: '否'
                }],
                tableData: [{
                    activityId: '0021',
                    activityName: '50元秒杀50元秒杀50元秒杀50元秒杀50元秒杀50元秒杀50元秒杀50元秒杀50元秒杀50元秒杀50元秒杀50元秒杀50元秒杀50元秒杀50元秒杀50元秒杀50元秒杀50元秒杀',
                    projectName: '50元秒杀50元秒杀50元秒杀50元秒杀50元秒杀50元秒杀50元秒杀',
                    ifconfig: '是',
                    configNum: '2',
                    createTime: '2018/06/04',
                }, {
                    activityId: '0021',
                    activityName: '50元秒杀',
                    projectName: '50元秒杀50元秒杀50元秒杀50元秒杀50元秒杀50元秒杀50元秒杀',
                    ifconfig: '是',
                    configNum: '2',
                    createTime: '2018/06/04',
                }],
                tableData1: [{
                    sellerId: '0021',
                    sellerName: '50元秒杀',
                    companyName: '天河50元秒杀天河50元秒杀天河50元秒杀天河50元秒杀天河50元秒杀',
                    area: '广州',
                    genre: '产康',
                    adExpend: '100000',
                    balanceCycle: '10',
                    balanceRuleNum: '2',
                    higherUp: '动物保护组织',
                }, {
                    sellerId: '0021',
                    sellerName: '50元秒杀',
                    companyName: '天河50元秒杀',
                    area: '广州',
                    genre: '产康',
                    adExpend: '100000',
                    balanceCycle: '10',
                    balanceRuleNum: '2',
                    higherUp: '动物保护组织',
                }],
                username: '',
                value: '',
                // 来自test_data.js
                menus: menus,
                // 来自test_data.js
                userDetail: userDetail
            }
        },
        methods: {
            handleClick(tab, event) {
                console.log(tab, event);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            balanceSettingActivity() {
                window.location.href = 'balance_setting_activity.html';
            },
            balanceSettingOffline() {
                window.location.href = 'balance_setting_offline.html';
            },
            balanceSettingSeller() {
                window.location.href = 'balance_setting_seller.html';
            },
            logout() {
                window.location.href = 'login.html';
            },
        },
        mounted() {
            document.querySelector('body').style.display = 'block';
        }
    });
</script>
</html>
